<template>
	<view class="main">
		<view class="tab">
			<cc-underLineTabs :tabIndex="current" :tabs="items" @change="tabChange"></cc-underLineTabs>
		</view>
		<view class="list">
			<view class="card" v-for="item in couponList" :key="item">
				<Card :item="item" :type="0" />
			</view>
			<uni-load-more iconType="circle" :status="status" />
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import Card from '@/components/card.vue';
import { getMyCouponList } from '@/api/apiList.js';
import { onPullDownRefresh, onReachBottom, onLoad } from '@dcloudio/uni-app';

let current = ref(0);
const items = ref(['全部', '未使用', '已使用', '已过期']);
const values = ref(['', 0, 1, 2]);
let type = ref(0);

const tabChange = (index) => {
	switch (index) {
		case 0:
			queryData.isVerifiedTime = 0;
			queryData.verified = '';
			break;
		case 1:
			queryData.isVerifiedTime = 1;
			queryData.verified = 0;
			break;
		case 2:
			queryData.isVerifiedTime = 0;
			queryData.verified = 2;
			break;
		case 3:
			queryData.isVerifiedTime = 2;
			queryData.verified = 0;
			break;
	}
	current.value = index;
	// queryData.verified = values.value[index];
	queryData.pageNum = 1;
	couponList.value = [];
	getCouponListData();
};

// 请求优惠券列表
let queryData = reactive({
	pageNum: 1,
	pageSize: 10,
	isVerifiedTime: 0,
	verified: ''
});
let couponList = ref([]);
const status = ref('no-more');
const getCouponListData = async () => {
	status.value = 'loading';
	const res = await getMyCouponList(queryData);
	if (res.code == 200) {
		if (res.data.list.length) {
			couponList.value = [...couponList.value, ...res.data.list];
			status.value = 'no-more';
		} else {
			status.value = 'no-more';
		}
	}
};

onPullDownRefresh(async () => {
	uni.showLoading();
	couponList.value = [];
	queryData.pageNum = 1;
	await getCouponListData();
	uni.hideLoading();
	uni.stopPullDownRefresh();
});

onReachBottom(() => {
	queryData.pageNum++;
	getCouponListData();
});

onLoad(() => {
	getCouponListData();
});
</script>

<style lang="scss" scoped>
.tab {
	background-color: #fff;
	padding: 18rpx 0 0 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 84rpx;
	z-index: 9999;
}
.list {
	margin-top: 84rpx;
	padding: 30rpx;
}
</style>
